<script setup lang="ts">
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import dayjs from 'dayjs'

import { delArticle, getArticleList } from '@/api/article';
import { onMounted, ref } from 'vue';
import type { SearchField, Article, Cate, PageResult } from '@/types'
import { getCateList } from '@/api/cate';
import PageComponent from '@/components/PageComponent.vue';
import ArticleManageEdit from './components/ArticleManageEdit.vue';
import { ElMessage } from 'element-plus';
const searchField = ref<SearchField>({
  pagenum: 1,
  pagesize: 10,
} as SearchField)
const articleInfoPage = ref<PageResult<Article>>({} as PageResult<Article>)
const cateList = ref<Cate[]>([])
const page = ref()

const changePage = (pageNo: number, pageSize: number) => {
  searchField.value.pagenum = pageNo
  searchField.value.pagesize = pageSize
  searchList()

}
const searchList = async () => {
  articleInfoPage.value = await getArticleList(searchField.value)
  page.value.open(searchField.value.pagenum, searchField.value.pagesize, articleInfoPage.value.total)
}
const rest = () => {
  searchField.value = {
    pagenum: 1,
    pagesize: 10,
  }
}
const articleManageEdit = ref()
const dialogTipsOpen = ref()
const publicArticle = () => {
  articleManageEdit.value.open(undefined)
}
const modifyArticle = (row: Article) => {
  articleManageEdit.value.open(row.id)
}

const handleDelete = (id: number) => {
  dialogTipsOpen.value.open(id)
}
const confirmDelete = (id: number) => {
  delArticle(id)
  searchList()
  ElMessage.success("删除成功")
}

onMounted(async () => {
  searchList()
  cateList.value = await getCateList()
})
</script>
<template>
  <div class="main">
    <div class="article">
      <span>文章管理</span>
      <el-button type="primary" @click="publicArticle">发布文章</el-button>
    </div>
    <el-form :inline="true" :model="searchField" class="searchForm">
      <el-form-item label="文章分类：">
        <el-select v-model="searchField.cate_id" placeholder="请选择" clearable class="search-select">
          <el-option v-for="cate in cateList" :label="cate.cate_name" :value="cate.id" :key="cate.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="发布状态：">
        <el-select v-model="searchField.state" placeholder="请选择" clearable class="search-select">
          <el-option label="已发布" value="已发布" />
          <el-option label="草稿" value="草稿" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="rest">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="articleInfoPage.data || []" style="width: 100%">
      <el-table-column prop="title" label="文章标题" width="300px" />
      <el-table-column prop="cate_name" label="分类" width="300px" />
      <!-- <el-table-column prop="pub_date" label="发表时间" width="300px" /> -->
      <el-table-column label="发表时间" width="300px">
        <template #default="{ row }">
          {{ dayjs(row.pub_date).format('YYYY-MM-DD hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="300px" />
      <el-table-column prop="address" label="操作" width="300px">
        <template #default="scope">
          <el-button type="primary" plain :icon="Edit" circle @click="modifyArticle(scope.row)" />
          <el-button type="danger" plain :icon="Delete" circle @click="handleDelete(scope.row.id)" />
        </template>
      </el-table-column>
      <!-- 空数据自定义 -->
      <template #empty>
        <el-empty description="空空如也" />
      </template>
    </el-table>
    <PageComponent ref="page" @changePage="changePage"></PageComponent>
    <ArticleManageEdit ref="articleManageEdit" @searchList="searchList"></ArticleManageEdit>
    <DialogTips @confirm="confirmDelete" ref="dialogTipsOpen"></DialogTips>
  </div>

</template>

<style scoped>
.main {
  margin-top: 20px;

  .article {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #909399;
  }

  .searchForm {
    margin-top: 20px;
    height: 50px;

    .search-select {
      width: 200px;
    }
  }

}
</style>
